/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
        <div class="operate-container" 
            @dragover="_dragOperateOver" 
            @drop="_dropOperate" 
            ref="operateWrap">
            <div class="operate-wrap">
                <div v-for="(item,index) in operateList" 
                    :key="index" 
                    class="item"
                >
                    <div class="item-img" 
                    :class="item.type" 
                    @contextmenu="_contextmenu"
                    @mouseup="_mouseup($event,item)"
                    @click="_deployOperate(item)"></div>
                    <div class="item-name">{{item.name}}</div>
                    <div class="item-arrow" v-if="_showArrow(index)"></div>
                </div>
            </div>
            <sf-menu ref="oprBtn">
                <sf-menu-item @click="_previewOperate">预览</sf-menu-item>
                <!-- 只有最后一个算子才能被删除，删除必须是从下往上的 -->
                <sf-menu-item @click="_deleteOperate" v-if="isLastOperate">删除</sf-menu-item>
            </sf-menu>
        </div>
   
    </template>
    
<script >
    
import {mapGetters} from 'vuex';
export default {
       
    props:{
        operateList: {
            type: Array,
            default: ()=>[]
        }
    },
    data () {
        return {
            name: '',

            //默认存在
            operateItem:''
        };
    },
    mounted () {
    },
    computed: {
        ...mapGetters([
            'dragOperateConfigType'
        ]),

        //是否为最后一个算子
        isLastOperate () {
            if (this.operateList.length > 0 && this.operateItem.id) {
                let lastOperateID = this.operateList[this.operateList.length - 1].id || '';
                let operateItemID = this.operateItem.id;
                return lastOperateID === operateItemID;
            }
            return false;
            
            
        }
    },
    methods:{
        _showArrow (index) {
            let len = this.operateList.length - 1;
            return index !== len;
        },
        _dropOperate () {
            this.$emit('drop-operate', this.dragOperateConfigType);
        },
        _dragOperateOver (e) {
            e.preventDefault();
        },

        //预览算子
        _previewOperate () {
            this.$emit('preview-operate', this.operateItem);
        },

        //部署算子
        _deployOperate (item) {
            this.$emit('deploy-operate', item);
        },
        _contextmenu (e) {
            e.preventDefault();
        },

        //点击右键删除算子
        _mouseup (event, item) {
            const RIGHT_BTN = 2;

            //默认的数据集算子不允许删除
            if (event.button === RIGHT_BTN) {
                this.$refs.oprBtn.showAt(event.x, event.y);
                this.operateItem = item;
            }
        },

        //删除算子
        _deleteOperate () {
            this.$emit('delete-operate', this.operateItem);
        }
    }
};
</script>
    
    <style lang="less">
    .operate-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #F5F6FA;
        padding-left: 400px;
        padding-top: 30px;
        .operate-wrap{
            display: flex;
            flex-direction: column;
            width: 100px;
        }
        .item{
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 52px;
            &:last-child{
                .item-arrow{
                    display: none;
                }
            }
            &-img{
                width: 40px;
                height: 40px;
                margin-bottom: 6px;
                cursor: pointer;
                &.dataSet{
                    background: url(../../../img/data_set.svg) no-repeat;
                    background-size:100% 100%;
                }
                &.sum{
                    background: url(../../../img/opr.svg) no-repeat;
                    background-size:100% 100%;
                }
                &.filter{
                    background: url(../../../img/filter.svg) no-repeat;
                    background-size:100% 100%;
                }
                &.timeStamp{
                    background: url(../../../img/timeStamp.svg) no-repeat;
                    background-size:100% 100%;
                }
                &.agg{
                    background: url(../../../img/agg.svg) no-repeat;
                    background-size:100% 100%;
                }
            }
            &-name{
                color: #1B1B1B;
            }
            &-arrow{
                position: absolute;
                bottom: -52px;
                width: 10px;
                height: 47px;
                margin-left: -5px;
                left: 50%;
                background: url(../../../img/arrow.png) no-repeat;
                background-size: 100% 100%;
            }
            &-icon{
                top: 6px;
                right: 6px;
                font-size: 12px;
                position: absolute;
                line-height: 20px;
                cursor: pointer;
                .icon{
                    font-size: 12px;
                }
            }
        }
    }
    </style>